<template>
  <div class="pie" id="main" style="width:400px;height:400px"></div>
</template>

<script>
import { defineComponent, onMounted } from 'vue'
import Watermark from 'watermark-plus';

export default defineComponent({
  setup() {
    let num = 1;
    onMounted(() => {
      console.log(2)
    })
    return {
      num
    }
  },
  mounted () {
    const watermark = new Watermark({
      content: '江西省政府,张会真,2023-01-30 15:02:26232323',
      fontSize: 20
    })
    watermark.create()
    var mychart = window.echarts.init(document.getElementById('main'))
    var option = {
      tooltip:{ //浮窗
        trigger: 'item',
        // textStyle: {
        //   fontSize: 20
        // }
        formatter:"{a}<br/>{b}:{c}({d}%)"
      },
      color: ['#dbdbdc', '#ffb716', '#0066ff'],
      // legend: {//图例
      //   top: 'center',
      //   right: 20,
      //   itemWidth: 8,
      //   itemHeight: 8,
      //   orient: 'vertical',
      //   textStyle: {
      //     fontSize: 14,
      //     padding: [0, 8],
      //     rich: {
      //       a: {
      //         width: 30,
      //         fontSize: 14,
      //         align: 'left',
      //         color: '#fff'
      //       }
      //     }
      //   }
      // },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['70%', '80%'],
          center: ['50%', '50%'],
          // emphasis: {
          //   label: {
          //     show: true,
          //     rich: {
          //       percent: {
          //         fontSize: 32,
          //         color: '#fff'
          //       },
          //       sexName: {
          //         fontSize: 16,
          //         color: '#ccc'
          //       }
          //     }
          //   }
          // },
          avoidLabelOverlap: false,
          hoverAnimation: false,
          label: {
            normal: {
              show: true,
              position: 'center',
              fontWeight: 'bold',
              formatter: '{a|{d}%}\n{b|{b}}', //{b}数据名，{c}数据值 {d}百分比
              rich: {
                a: {
                  color: '#03a9f4',
                  padding: [0,10],
                  fontSize:40
                },
                b:{
                  color: 'red',
                  padding: [0,10],
                  fontSize:20
                }
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            { value: 90, name: '超标', label:{ normal: {show: true} } },
            { value: 10, name: '正常', label:{ normal: {show: false} } }
          ]
        }
      ]
    };
    mychart.setOption(option);
  }
})
</script>
